<template>
    <div class="header">
        <van-nav-bar title="借调记录" left-arrow @click-left="routerOutClick">
        </van-nav-bar>
    </div>
    <div class="secondmentGoods">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="list.length == 0 && !refreshing">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无数据</div>
                    </div>
                </template>
                <van-swipe-cell v-for="item in list" :key="item.id">
                    <div class="cell" @click="goDetails(item.id)">
                        <div class="content">
                            <div class="title">向{{ item.auditName }}发起的商品借调</div>
                            <div class="times">{{ item.loanTime }}</div>
                        </div>
                        <div :class="`status ${statusName(item.status)[1]}`">{{ statusName(item.status)[0] }}</div>
                    </div>
                </van-swipe-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getStartLoanList } from '@/api/operation/index'
import { useRouter } from 'vue-router';
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href
const router = useRouter();

const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<Array<any>>([]);
// 限制连续刷新数据重复问题
const refreFlag = ref(true)

const queryParams = ref<any>({
    pageSize: 10,
    pageNum: 1,
})

/** 回退 */
const routerOutClick = () => {
    router.back()
}

/** 跳转详情 */
const goDetails = (id: string) => {
    router.push({
        path: '/secondmentGoodsDetails',
        query: {
            id,
            title: '记录详情',
            type: 'status'
        }
    })
}
// 获取列表数据
const getList = async () => {
    const { data = [], total = 0 } = await getStartLoanList({})
    refreFlag.value = true
    // 空数据 停止加载
    if (data.length == 0) {
        list.value = [];
        finished.value = true;
        return;
    }
    // 有数据 赋值列表 加载状态结束
    data.forEach((item: any) => {
        finished.value = false;
        list.value.push(item);
    });
    loading.value = false;
    refreshing.value = false;
    // 如果list长度大于等于总数据条数，数据全部加载完成
    if (list.value.length >= total) {
        finished.value = true; //结束加载
    }
}
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};

const statusName = (status) => {
    if (status === 0) {
        return ['待处理', 'status_lan']
    } else if (status === 1) {
        return ['已撤销', 'status_hui']
    } else if (status === 2) {
        return ['已过期', 'status_hong']
    } else if (status === 3) {
        return ['已同意', 'status_lv']
    } else if (status === 4) {
        return ['已拒绝', 'status_hong']
    } else {
        return ['未知', 'status_node']
    }
}
</script>
<style lang="less" scoped>
:deep(.van-icon-arrow-left) {
    color: #000;
}

.history {
    color: #0094FF;
}

.header {
    background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
    filter: blur(0px);
    height: 90px;
    padding-top: 44px;
    box-sizing: border-box;

    :deep(.van-icon-arrow-left) {
        color: #1a1b1c !important;
    }

    :deep(.van-nav-bar) {
        background: none !important;
    }

    :deep(.van-nav-bar__content) {
        background-color: transparent !important;
    }
}

.secondmentGoods {
    width: 100%;
    height: calc(100vh - 90px);
    background-color: #f6faff;
    box-sizing: border-box;
    padding: 10px 15px;

    :deep(.van-pull-refresh) {
        height: 100%;
        overflow: scroll;
    }


    .cell {
        width: 100%;
        margin-bottom: 10px;
        background-color: #fff;
        height: 70px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        position: relative;
        box-sizing: border-box;
        padding-left: 15px;

        .van-image {
            width: 34px;
            height: 34px;
            margin: 0 10px;
        }

        .content {
            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                line-height: 2;
            }

            .times {
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
            }
        }

        .status {
            position: absolute;
            right: 0;
            top: 0;
            width: 56px;
            height: 22px;
            border-radius: 0px 5px 0px 5px;
            text-align: center;
            line-height: 22px;
            font-weight: 500;
            font-size: 12px;
        }

        .status_lan {
            background: #EBF4FF;
            color: #0094FF;
        }

        .status_lv {
            background: #E7FDEE;
            color: #19D11B;
        }

        .status_hong {
            background: #FDE7E7;
            color: #FC2540;
        }

        .status_hui {
            background: #EBEDF2;
            color: #8492AD;
        }

        .status_node {
            display: none;
        }
    }
}
</style>